<template>
    <div>
        姓名:
        <input type="text" v-model="vor.name" >
         功能:
        <select v-model="vor.id">
                            <option value="">请选择</option>
                            <option :value="o.sId" v-for="o in find">{{ o.sName }}</option>
                        </select>
                        <input type="button" value="查询" @click="Show" >
        <table class="table table-bordered ">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>图片</td>
                    <td>简介</td>
                    <td>状态</td>
                    <td>功能</td>
                    <td>操作</td>
                </tr>
                <tr v-for="o in info.listt">
                    <td>{{ o.dName }}</td>
                    <td><img :src="o.img" width="60" height="60" ></td>
                    <td>{{ o.dbend }}</td>
                    <td>{{ o.state==1?"启用":"禁用" }}</td>
                    <td>{{ o.sName }}</td>
                    <td><input type="button" value="删除" @click="Delete(o.dId)" >
                        <input type="button" value="修改" @click="Upda(o.dId)" >
                        </td>
                </tr>
            </thead>
        </table>

        <span>共{{ info.zh }}行</span>
        <span>每页{{ vor.pasize }}行</span>
        <span>第{{ vor.pazicount  }}/{{ info.zy }}页</span>
        <input type="button" value="首页" @click="fn(1)" >
        <input type="button" value="上一页" @click="fn(vor.pazicount-1)" >
        <input type="button" :value="o" v-for="o in info.zy " @click="fn(o)" >
        <input type="button" value="下一页" @click="fn(vor.pazicount+1)" >
        <input type="button" value="尾页" @click="fn(info.zy)" >
        <input type="number" v-model="vor.pazicount" >
        <input type="button" value="跳转" @click="Show" >
        <select v-model="vor.pasize" @change="Show" >
            <option :value="o" v-for="o in arr" >每页{{ o }}行</option>
        </select>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { isLeftHandSideExpression, isMissingDeclaration } from 'typescript';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();


let info:any=ref({
    listt:[],
    zh:0,
    zy:0
});

let vor:any=ref({
    name:'',
    id:'',
    pazicount:1,
    pasize:3

});
    

let find:any=ref([]);


let arr:any=ref([2,4,6,8]);

onMounted(()=>{
    Show();
    List();
} )

const fn=(num:any)=>{
    console.log(num);
    vor.value.pazicount=num;
    Show();
}

const Upda=(dId:any )=>{
    router.push({
        path:"/updada",
        query:{
            id:dId
        }
    })
}

const Show=()=>{
    axios({
        url:'https://localhost:7033/api/User/ShowD',
        method:'get',
        params:vor.value
    })

    .then((res)=>{
        Object.assign(info.value, res.data);
    })
}

const Delete=(dId:any)=>{
    let f=confirm("要删除吗");
    if(f){
        axios({
            url:'https://localhost:7033/api/User/Dele',
            method:'post',
            params:{
                id:dId
            }  
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
        {
            alert("删除成功");
            Show();
        }
        else
        {
            alert("删除失败");
        }
        })
    }
}


const List = () => {

    axios({
        url: 'https://localhost:7033/api/User/ListS',
        method: 'get',
    })
        .then((res) => {
            console.log(res);
            find.value = res.data
        })
}



    
    



</script>

<style scoped>

</style>